import 'package:flutter/material.dart';
class CustomScrollView_Widget extends StatelessWidget {
  const CustomScrollView_Widget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  Material(
      child: CustomScrollView(
        slivers: <Widget>[
          //AppBar，包含一个导航栏
          SliverAppBar(
            pinned: true,
            expandedHeight: 250.0,
           elevation:0,
            actions:<Widget>[
              Image.asset("images/main_square_tab_default.png",width: 200,fit: BoxFit.cover,)
            ],
            backgroundColor: Color(0xFF80000000),
            flexibleSpace: FlexibleSpaceBar(
              title: const Text('Demo'),
              background: Image.network(
                "https://image.dapengjiaoyu.com/2021-07-09/kbbni68cmu/202107091417020.jpg?x-oss-process=style/400x400lb", fit: BoxFit.cover,),
            ),
          ),

          SliverPadding(
            padding: const EdgeInsets.all(8.0),
            sliver:  SliverGrid( //Grid
              gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2, //Grid按两列显示
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: 4.0,
              ),
              delegate:  SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                  //创建子widget
                  return new Container(
                    alignment: Alignment.center,
                    color: Colors.cyan[100 * (index % 9)],
                    child: new Text('grid item $index'),
                  );
                },
                childCount: 20,
              ),
            ),
          ),
          //SliverFixedExtentList   比 SliverList 多一个 itemExtent 属性，设置 item 的高度 。item 里面的子控件无法再改动高度。
          SliverList(
            // itemExtent: 50.0,
            delegate: new SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                  //创建列表项
                  return new Container(
                    height: 100,
                    alignment: Alignment.center,
                    color: green[100 * (index % 9)],
                    child: new Text('list item $index'),
                  );
                },
                childCount: 50 //50个列表项
            ),
          ),
        ],
      ),
    );
  }

  static const MaterialColor green = MaterialColor(
    _greenPrimaryValue,
    <int, Color>{
      50: Color(0xFFE8F5E9),
      100: Color(0xFFC8E6C9),
      200: Color(0xFFA5D6A7),
      300: Color(0xFF81C784),
      400: Color(0xFF66BB6A),
      500: Color(_greenPrimaryValue),
      600: Color(0xFF43A047),
      700: Color(0xFF388E3C),
      800: Color(0xFF2E7D32),
      900: Color(0xFF1B5E20),
    },
  );
  static const int _greenPrimaryValue = 0xFF4CAF50;

}